<template>
  <div class="manage">
    <el-dialog
      title="新增"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handelClose">
      <!--新增表单信息 -->
      <el-form ref="form" :inline="true" :model="form" label-width="80px">
        <br/>
        <el-form-item label="图片" prop="avatar">
          <el-upload
            style="border:1px dashed #d1d1d1"
            class="avatar-uploader"
            :action="uploadURL"
            name="uploadFile"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="form.url" :src="form.url" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <br/>
      </el-form>

      <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
    <!--form 搜索区-->
    <el-form :inline="true" :model="userForm">
      <el-form-item label="文件标识">
        <el-input placeholder="文件标识" v-model="userForm.uuid" size="mini"></el-input>
      </el-form-item>
      <el-form-item label="访问路径">
        <el-input placeholder="访问路径" v-model="userForm.path" size="mini"></el-input>
      </el-form-item>
      <el-form-item label="物理存放路径">
        <el-input placeholder="物理存放路径" v-model="userForm.filePath" size="mini"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="userForm.delFlag" clearable placeholder="状态" size="mini">
          <el-option
            v-for="item in delFlag"
            :key="item.code"
            :label="item.value"
            :value="item.code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" size="mini" plain><i class="el-icon-search"></i>搜 索</el-button>
        <el-button  @click="onReset" size="mini" plain><i class="el-icon-refresh"></i>重 置</el-button>
      </el-form-item>
    </el-form>
    <!--操作区-->
    <div class="manage-header">
      <el-button @click="handelAdd" type="primary" plain size="mini">
        <i class="el-icon-plus"></i>新增
      </el-button>
      <el-button @click="handelDel" type="danger" plain size="mini" :disabled="disabled">
        <i class="el-icon-delete"></i>删除
      </el-button>
    </div>
    <div class="common-table">
      <!--内容-->
      <el-table
        height="90%"
        :data="tableData"
        style="width: 100%"
        stripe
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column prop="uuid" label="标识" width="200px" fixed></el-table-column>
        <el-table-column prop="fileName" label="图片名称" width="200px" fixed></el-table-column>
        <el-table-column prop="" label="图片" fixed>
          <template slot-scope="scope">
            <el-avatar shape="square" v-if="scope.row.url" :src="scope.row.url">
              <img shape="square" src="../assets/fallback.png"/>
            </el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="url" label="访问路径" width="400px"></el-table-column>
        <el-table-column prop="filepath" label="存放路径" width="400px"></el-table-column>
        <el-table-column prop="" label="状态" width="100">
          <template slot-scope="scope">
            <a @click="updateDelFlag(scope.row)">
              <el-switch
                v-model="scope.row.delFlag==0 ? true : false"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </a>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          width="170"
          label="创建时间">
        </el-table-column>
        <el-table-column prop="" label="操作" width="100" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handelDelAdvertisement(scope.row)"><i class="el-icon-delete"></i>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--页码-->
      <div class="pager">
        <el-pagination
          layout="prev, pager, next"
          :total="this.total"
          @current-change="handelPage">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
    import { listPageAdvertisement,delAdvertisements, updateAdvertiseent, delAdvertisement} from "../api"
    export default {
        name: "advertisement",
        data(){
            return{
                dialogVisible:false,
                form: {
                    id: '',
                    uuid: '',
                    fileName: '',
                    url: '',
                    remark: '',
                    delFlag:null
                },
                tableData: [],
                modelType: 0,  //0：新增，1：修改
                total: 0,
                pageData:{
                    page: 1,
                    limit: 10
                },
                dateTime:[],
                //查询条件
                userForm: {
                    uuid: "",
                    url: '',
                    filepath: '',
                    delFlag: null
                },
                disabled: false,
                ids:[],
                delFlag: [
                    {
                        code: 0,
                        value: '正常'
                    },
                    {
                        code: 1,
                        value: '停用'
                    }
                ],
                uploadURL:'http://localhost:8080/advertisement/uploadImage'
            }
        },
        methods:{
            //文件上传成功
            handleAvatarSuccess(res, file) {
                this.form.url=file.response
                //this.imageUrl = URL.createObjectURL(file.raw);
            },
            //文件上传之前
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isPNG = file.type === 'image/png';
                const isLt3M = file.size / 1024 / 1024 < 3;
                if (!isJPG && !isPNG) {
                    this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
                    return false;
                }
                if (!isLt3M) {
                    this.$message.error('上传头像图片大小不能超过 3MB!');
                    return false;
                }
                return true;
            },
            //提交
            submit(){
                this.listPageAdvertisement();
                this.handelClose();
            },
            //弹窗关闭的时候
            handelClose(){
                //重置表单
                this.$refs.form.resetFields();
                this.dialogVisible=false;
            },
            //点击取消
            cancel(){
                this.handelClose();
            },
            //修改状态
            updateDelFlag(row){
                this.$confirm('确定要“'+(row.delFlag == 0 ? "停用" : "启用")+'”“'+row.fileName+'吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    row.delFlag=(row.delFlag == 0 ? 1 : 0);
                    console.log(row)
                    //修改
                    updateAdvertiseent(row).then(({ data }) => {
                        this.listPageAdvertisement();
                        this.$message({
                            type: data.type,
                            message: data.message
                        });
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            //删除
            handelDelAdvertisement(row){
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    delAdvertisement(row).then(({ data })=>{
                        this.listPageAdvertisement();
                        this.$message({
                            type: data.type,
                            message: data.message
                        });
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //批量删除
            handelDel(){
                delAdvertisements({ids:this.ids}).then(({data})=>{
                    this.listPageAdvertisement();
                    this.$message({
                        type: data.type,
                        message: data.message
                    });
                });
            },
            //新增
            handelAdd(){
                this.form={
                      id: '',
                      uuid: '',
                      fileName: '',
                      url: '',
                      remark: '',
                      delFlag:null
                };
                this.modelType=0;
                this.dialogVisible=true;
            },
            //选中的记录
            handleSelectionChange(val){
                this.ids=[];
                val.forEach(item=>{
                    this.ids.push(item.id);
                });
                if (this.ids.length>0){
                    this.disabled=false;
                }else{
                    this.disabled=true;
                }
            },
            //获取列表
            listPageAdvertisement(){
                listPageAdvertisement({...this.userForm,...this.pageData}).then(( {data} )=>{
                    //console.log(data,"获取的")
                    this.tableData=data.list;
                    //如果data.count不存在 就为0
                    this.total=data.count || 0;
                });
            },
            //获取页码
            handelPage(val){
                this.pageData.page=val;
                this.listPageAdvertisement();
            },
            //条件查询
            onSubmit(){
                this.listPageAdvertisement();
            },
            //重置
            onReset(){
                this.userForm={
                    uuid: "",
                    url: '',
                    filepath: '',
                    delFlag: null
                }
            }
        },
        //页面首次加载时调用的地方
        mounted() {
            this.listPageAdvertisement();
        }
    }
</script>

<style lang="less" scoped>
  .manage{
    height: 90%;
    .manage-header{
      display: flex;
      //justify-content: space-between;
      align-items: center;
    }
    .common-table{
      position: relative;
      //动态计算高度
      height: calc(100% - 62px);
      .pager{
        position: absolute;
        bottom: 0;
        right: 20px;
      }
    }
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
